<template>
  <el-form-item v-bind="field.item" :rules="itemRules" :prop="fieldProp">
    <!-- 针对不同组件使用特定的包裹结构，确保样式正常 -->
    <template v-if="field.type === 'input'">
      <el-input v-model="data[fieldProp]" v-bind="field.attrs" :placeholder="placeholder" show-word-limit>
        <template #prepend v-if="field.attrs.prepend">{{ field.attrs.prepend }}</template>
        <template #append v-if="field.attrs.append">
          {{ field.attrs.append }}
        </template>
      </el-input>
    </template>
    <template v-else-if="field.type === 'textarea'">
      <el-input type="textarea" v-model="data[fieldProp]" v-bind="field.attrs" :placeholder="placeholder"
        show-word-limit />
    </template>
    <template v-else-if="field.type === 'select'">
      <el-select v-model="data[fieldProp]" v-bind="field.attrs" :placeholder="placeholder">
        <el-option v-for="opt in field.options" :key="opt.value" :label="opt.label" :value="opt.value" />
      </el-select>
    </template>
    <template v-else-if="field.type === 'radio'">
      <el-radio-group v-model="data[fieldProp]" v-bind="field.attrs" :placeholder="placeholder">
        <el-radio v-for="opt in field.options" :key="opt.value" :value="opt.value">
          {{ opt.label }}
        </el-radio>
      </el-radio-group>
    </template>
    <template v-else-if="field.type === 'checkbox'">
      <el-checkbox-group v-model="data[fieldProp]" v-bind="field.attrs" :placeholder="placeholder">
        <el-checkbox v-for="opt in field.options" :key="opt.value" :value="opt.value" :label="opt.label" />
      </el-checkbox-group>
    </template>
    <template v-else>
      <!-- 其他组件 -->
      <component :is="getComponent(field.type)" v-model="data[fieldProp]" v-bind="field.attrs"
        :placeholder="placeholder"></component>
    </template>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElCheckbox, ElInput, ElInputNumber, ElInputTag, ElRate, ElSlider, FormItemProps, FormItemRule } from "element-plus";
import { ElSwitch } from "element-plus";
import { ElDatePicker } from "element-plus";
import { CustomRuleConst, FormControlType, FormField, LayoutControlType, MargeRuleType } from "../..";

// 表单 props 定义（带类型）
const props = defineProps<{
  field: FormField;
  data?: Record<string, any>;
}>();


const fieldProp = computed(() => {
  return props.field.field || props.field.id;
})

const placeholder = computed(() => {
  return props.field.attrs.placeholder || `请输入${props.field.item.label}`;
})

const itemRules = computed(() => {
  const rules = ref<FormItemRule[]>([]);
  const customeRoleType = CustomRuleConst as readonly string[];
  props.field.item.rules.forEach(x => {
    let type = x.type;
    if (customeRoleType.includes(x.type)) {
      type = ruleType(props.field.type);
    }
    rules.value.push({ ...x, type: type } as FormItemRule)
  })
  return rules.value;
})

//特殊校验处理
const ruleType = (type: FormControlType | LayoutControlType): MargeRuleType => {
  if (type === 'date') {
    return 'date';
  } else if (type === 'inputNumber' || type === 'slider' || type === 'rate') {
    return 'number';
  } else if (type === 'checkbox' || type === 'inputTag') {
    return 'array';
  } else if (type === 'switch') {
    return 'boolean';
  } else {
    return null;
  }
}

// 根据类型获取组件
const getComponent = (type: FormField["type"]) => {
  const components: Record<string, any> = {
    input: ElInput,
    textarea: ElInput,
    inputNumber: ElInputNumber,
    inputTag: ElInputTag,
    switch: ElSwitch,
    select: ElSelect,
    date: ElDatePicker,
    radio: ElRadioGroup,
    checkbox: ElCheckbox,
    slider: ElSlider,
    rate: ElRate
  };
  return components[type] || ElInput;
};
</script>
